<template>
    <div>
        <!-- 辅助函数 配合拆分后vuex -->
        <p>{{num}}</p>
        <p>{{title}}</p>
        <p>{{dbNum}}</p>
        <hr>
        <p v-for="(item,index) in info" :key="index">{{item.title}}</p>
        <p>总价{{totalPrice}}</p>
        <hr>
        <button @click="addNum(10)">同步添加</button>
        <button @click="asyncAddNum(20)">异步添加</button>
    </div>
</template>

<script>
import { mapState,mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {

        };
    },
    computed:{
        // 配合拆分写法 
        // 从单个模块中导入，但是每加入一个模块就要多写一次mapState(其他三个map辅助函数也是一样写法)
        /* 
        ...mapState('changeNum',['num','title']),
        ...mapState('tableInfo',['info']),

        ...mapGetters('changeNum',['dbNum']),
        ...mapGetters('tableInfo',['totalPrice'])

        */ 

        // 直接多个模块的导入,mapState只需要写一次(其他三个map辅助函数也是一样写法)
        // 写法总结：   
        // 1. mapState 的对象里面需要传入的是一系列函数:  变量名(名字自定义，但一般取和导入变量名称一样): state => state.模块名.对应模块的变量名
        // 2. mapGetters mapMutations mapActions  的对象里面需要传入的是一系列键值对  函数名: '模块名.对应模块的要导入的函数名'
        ...mapState({
            num: state => state.changeNum.num,
            title: state => state.changeNum.title,
            info: state => state.tableInfo.info
        }),
        ...mapGetters({
            dbNum: 'changeNum/dbNum',
            totalPrice: 'tableInfo/totalPrice'
        }) 
    },
    methods: {
        /*
        ...mapMutations('changeNum',['addNum']),
        ...mapActions('changeNum',['asyncAddNum'])
        */
       ...mapMutations({
           addNum: 'changeNum/addNum'
       }),
       ...mapActions({
           asyncAddNum: 'changeNum/asyncAddNum'
       })
    },
};
</script>

<style scoped lang="less">

</style>
